<!-- assets/chart.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Example</title>
    <script src="echarts.min.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        #main {
            top: 20px;
            width: 100%;
            height: 400px;
        }

        #main1 {
            top: 20px;
            width: 100%;
            height: 400px;
        }


    </style>
</head>

<body>
<div>
    <span>汇总图</span>
    <div id="main"></div>
</div>

<table border="1" style="width: 100%;border-collapse: collapse;text-align: center;font-size:15px"
       id="mytable">

</table>
<script>
        window.onload = function () {
            var mydata = Android.getData();
            var dataValue = Android.getDataValue();
            // 在这里使用传递的参数
            // 示例字符串（假设这是从 WebView 接收到的数据）
            //var jsonString = '["Item 1", "Item 2", "Item 3"]';

            // 将 JSON 字符串转换为 JavaScript 数组
            //var stringArray = JSON.parse(jsonString);

            var myChart = echarts.init(document.getElementById('main'), null, { locale: 'ZH' });
            var option = {
                title: {
                    text: '总价：' + JSON.parse(Android.getDataSumPrice()),
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} "
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: JSON.parse(mydata)
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: false, readOnly: false },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: { show: true },
                        // saveAsImage : {show: true}
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '值',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        label: {
                            normal: {
                                position: 'inner',
                                show: true,
                                formatter: '{b}:{c}'
                            }
                        },
                        data: JSON.parse(dataValue)
                    }
                ]
            };
            myChart.setOption(option);

            myChart.on("click", function (params) {
                var name = params.name;
                var data = JSON.parse(Android.getDealData(name));
                if (name == "客户") {
                    myClient(data);
                }
                if (name == "收购人") {
                    purchaser(data);
                }
                if (name == "总件数") {
                    totality(data);
                }
            });

        }
        //客户表格
            function myClient(data) {
             $('#mytable').empty();
                var thead = "<thead><tr><th>客户名称</th> <th>件数</th><th>总价格</th><th>交易时间</th></tr></thead>";
                $('#mytable').append(thead);
                var str = "";//定义用于拼接的字符串
                for (var i = 0; i < data.length; i++) {
                  //拼接表格的行和列
                  if(data[i].agentName=="合计"){
                    str = "<tr  style='background:antiquewhite'><td>" + data[i].name + "</td><td>" + data[i].totalProduct + "</td><td colspan='2'>"+data[i].totalPrice+"元</td></tr>";
                  }else{
                   str = "<tr><td>" + data[i].name + "</td><td>" + data[i].totalProduct + "</td><td>"+data[i].totalPrice+"</td><td style='font-size:13px'>"+data[i].time+"</td></tr>";
                  }
                  //追加到table中
                  $('#mytable').append(str);
                }

            }
            //收购人表格
            function purchaser(data) {
                $('#mytable').empty();
                var thead = "<thead><tr><th>收购人名称</th> <th>件数</th><th>总价格</th><th>交易时间</th></tr></thead>";
                $('#mytable').append(thead);
                var str = "";//定义用于拼接的字符串
                for (var i = 0; i < data.length; i++) {
                  //拼接表格的行和列
                  if(data[i].agentName=="合计"){
                    str = "<tr  style='background:antiquewhite'><td>" + data[i].agentName + "</td><td>" + data[i].totalProduct + "</td><td colspan='2'>"+data[i].totalPrice+"元</td></tr>";
                  }else{
                   str = "<tr><td>" + data[i].agentName + "</td><td>" + data[i].totalProduct + "</td><td>"+data[i].totalPrice+"</td><td  style='font-size:13px'>"+data[i].time+"</td></tr>";
                  }
                  //追加到table中
                  $('#mytable').append(str);
                }
            }
            //总件数表格
            function totality(data) {
                $('#mytable').empty();
                var thead = "<thead><tr><th>名称</th> <th>价格</th></tr></thead>";
                $('#mytable').append(thead);
                var str = "";//定义用于拼接的字符串
                for (var i = 0; i < data.length; i++) {
                  //拼接表格的行和列
                  if(data[i].productName=="合计"){
                    str = "<tr style='background:antiquewhite'><td>" + data[i].productName + "</td><td>" + data[i].productPrice + "元</td></tr>";
                  }else{
                    str = "<tr><td>" + data[i].productName + "</td><td>" + data[i].productPrice + "元</td></tr>";
                  }
                  //追加到table中
                  $('#mytable').append(str);
                }
            }
</script>
</body>

</html>